<template>
  <div class="article container">
    <a-card
      :hoverable="true"
      :bordered="true"
      :bodyStyle="bodyStyle"
      class="article">

      <img alt="文章配图" :src="article.imgUrl" slot="cover" class="article-image"/>

      <a-card-meta>
        <p slot="title" class="subtitle">{{ article.title }}</p>
        <p slot="description">
          <span>
            <strong> <a-icon type="crown" /> {{article.author}}</strong>
            于
            <strong :title="article.createAt">{{article.fromNow}}</strong>
            发表在
            <strong style="text-transform: capitalize">{{article.category}}</strong>
          </span>
          <a-divider type="vertical" />
          <span><a-icon type="eye" /> {{ article.viewCounts }}</span>
          <a-divider type="vertical" />
          <span><a-icon type="like" /> {{ article.likeCounts }}</span>
          <a-divider type="vertical" />
          <span><a-icon type="message" /> {{ article.commentCounts }}</span>
        </p>
        <a-avatar
          slot="avatar"
          src="https://api.sofuny.cn/static/image/logo.png"
        />
      </a-card-meta>

      <div class="content">
        <!--内容主体-->
        <client-only>
          <mavon-editor
            ref=md
            :editable="false"
            :subfield="false"
            :boxShadow="false"
            :previewBackground="`#fff`"
            defaultOpen="preview"
            :toolbarsFlag="false"
            :shortCut="false"
            codeStyle="atom-one-dark"
            :value="article.content"
            :ishljs = "true"
            style="z-index: 0"
          />
        </client-only>

        <!--更新时间-->
        <p style="margin-top: 20px" v-if="article.createAt !== article.updateAt">
          最后更新于:
          <span>{{ article.updateAt }}</span>
        </p>
        <!--标签-->
        <div style="margin-top: 20px">
          <a-icon type="tags" style="font-size: 20px"/>:
          <a-button
            type="primary"
            ghost
            shape="round"
            v-for="(item, index) in article.tags"
            :key="index"
            class="tag"
          >{{ item }}</a-button>
        </div>

        <!--喜欢-->
      </div>
    </a-card>
  </div>
</template>

<script>
  import app from "../../../app"
  import moment from "moment"
  moment.locale("zh-CN");
  export default {
    name: "uuid",
    head(){ return { title: `${this.article.title} - ${this.$store.state.site.name}` } },
    async asyncData({ $axios, params, store, error }) {
      const resp = await $axios.$get(`${app.api}/api/${app.apiVersion}/article/`, { params: { uuid:params.uuid }});
      let article = resp.code === 200 ? resp.data : {};
      let time = article.createAt;
      article.fromNow = moment(time).fromNow();
      article.createAt = moment(time).format("YYYY-MM-DD HH:MM:ss");
      article.updateAt = moment(article.updateAt).format("YYYY-MM-DD HH:MM:ss");
      article.tags = article.tags.split(",");
      return { article }
    },
    data: ()=>({
      bodyStyle: {
        marginLeft: "-20px",
      }
    }),
    methods: {

    }
  }
</script>

<style scoped>
  .article{
    margin-top: 120px;
    min-height: 100vh;
  }
  .subtitle{
    margin-bottom: 0rem;
  }
  .content{
    margin-top: 20px;
  }
  .tag{
    margin-left: 5px;
  }
  .article-image{
    height: 300px;
  }
  @media screen and (max-width: 1023px){
    .article{
      margin-top: 66px;
      margin-left: 5px;
    }
    .article-image{
      height: 140px;
    }
  }
</style>
